<template>
	<view class="notice-container">
		<view class="notice-header">
			<view class="header-tabs">
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'notice' }" 
					@click="switchTab('notice')"
				>
					园区公告
				</view>
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'news' }" 
					@click="switchTab('news')"
				>
					园区资讯
				</view>
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'message' }" 
					@click="switchTab('message')"
				>
					我的消息
				</view>
			</view>
		</view>
		
		<!-- 园区公告列表 -->
		<view v-if="activeTab === 'notice'" class="notice-list">
			<uni-pull-down-refresh @refresh="refreshAnnouncements" :refreshing="announcementsLoading">
				<view v-if="noticeList.length === 0" class="empty-tip">
					<image class="empty-icon" src="/static/icons/empty.png"></image>
					<text class="empty-text">暂无公告信息</text>
				</view>
				
				<view v-else>
					<view 
						class="notice-item" 
						v-for="(item, index) in noticeList" 
						:key="index"
						@click="viewNoticeDetail(item)"
					>
						<view class="notice-info">
							<text class="notice-title">{{ item.title }}</text>
							<text class="notice-desc">{{ item.content }}</text>
							<view class="notice-meta">
								<text class="notice-time">{{ formatDate(item.publish_time) }}</text>
								<text class="notice-from">{{ item.sender_name }}</text>
							</view>
						</view>
						<view class="notice-tag" v-if="!item.read_status">
							<text class="tag-text">NEW</text>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<uni-load-more :status="announcementsLoadMoreStatus" v-if="noticeList.length > 0"></uni-load-more>
			</uni-pull-down-refresh>
		</view>
		
		<!-- 园区资讯列表 -->
		<view v-if="activeTab === 'news'" class="news-list">
			<uni-pull-down-refresh @refresh="refreshConsultations" :refreshing="consultationsLoading">
				<view v-if="newsList.length === 0" class="empty-tip">
					<image class="empty-icon" src="/static/icons/empty.png"></image>
					<text class="empty-text">暂无资讯信息</text>
				</view>
				
				<view v-else>
					<view 
						class="news-item" 
						v-for="(item, index) in newsList" 
						:key="index"
						@click="viewNewsDetail(item)"
					>
						<view class="news-info">
							<text class="news-title">{{ item.title }}</text>
							<view class="news-meta">
								<text class="news-time">{{ formatDate(item.publish_time) }}</text>
								<view class="news-meta-right">
									<text class="news-type">{{ getNewsTypeLabel(item.message_type) }}</text>
									<text class="news-from">{{ item.sender_name }}</text>
								</view>
							</view>
						</view>
						<view class="news-tag" v-if="!item.read_status">
							<text class="tag-text">NEW</text>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<uni-load-more :status="consultationsLoadMoreStatus" v-if="newsList.length > 0"></uni-load-more>
			</uni-pull-down-refresh>
		</view>
		
		<!-- 我的消息列表 -->
		<view v-if="activeTab === 'message'" class="message-list">
			<uni-pull-down-refresh @refresh="refreshUserMessages" :refreshing="userMessagesLoading">
				<view v-if="userMessageList.length === 0" class="empty-tip">
					<image class="empty-icon" src="/static/icons/empty.png"></image>
					<text class="empty-text">暂无个人消息</text>
				</view>
				
				<view v-else>
					<view 
						class="message-item" 
						v-for="(item, index) in userMessageList" 
						:key="index"
						@click="viewMessageDetail(item)"
					>
						<view class="message-info">
							<text class="message-title">{{ item.title }}</text>
							<text class="message-desc">{{ item.content }}</text>
							<view class="message-meta">
								<text class="message-time">{{ formatDate(item.publish_time) }}</text>
								<text class="message-type">{{ item.message_type }}</text>
							</view>
						</view>
						<view class="message-tag" v-if="!item.read_status">
							<text class="tag-text">NEW</text>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<uni-load-more :status="userMessagesLoadMoreStatus" v-if="userMessageList.length > 0"></uni-load-more>
			</uni-pull-down-refresh>
		</view>
	</view>
</template>

<script>
import { getAnnouncementList, getAnnouncementDetail, getConsultationList, getConsultationDetail, getUserMessages } from '@/api/notifications.js';

export default {
	data() {
		return {
			activeTab: 'notice',
			
			// 园区公告
			noticeList: [],
			announcementPage: 1,
			announcementSize: 10,
			announcementTotal: 0,
			announcementsLoading: false,
			announcementsLoadMoreStatus: 'more',
			
			// 园区资讯
			newsList: [],
			consultationPage: 1,
			consultationSize: 10,
			consultationTotal: 0,
			consultationsLoading: false,
			consultationsLoadMoreStatus: 'more',
			
			// 用户消息
			userMessageList: [],
			userMessagePage: 1,
			userMessageSize: 10,
			userMessageTotal: 0,
			userMessagesLoading: false,
			userMessagesLoadMoreStatus: 'more'
		}
	},
	onLoad() {
		this.loadAnnouncements();
	},
	onReachBottom() {
		if (this.activeTab === 'notice') {
			this.loadMoreAnnouncements();
		} else if (this.activeTab === 'news') {
			this.loadMoreConsultations();
		} else if (this.activeTab === 'message') {
			this.loadMoreUserMessages();
		}
	},
	methods: {
		// 切换标签
		switchTab(tab) {
			this.activeTab = tab;
			
			if (tab === 'notice' && this.noticeList.length === 0) {
				this.loadAnnouncements();
			} else if (tab === 'news' && this.newsList.length === 0) {
				this.loadConsultations();
			} else if (tab === 'message' && this.userMessageList.length === 0) {
				this.loadUserMessages();
			}
		},
		
		// 格式化日期
		formatDate(dateString) {
			if (!dateString) return '';
			
			const date = new Date(dateString);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		// 加载园区公告
		async loadAnnouncements() {
			try {
				this.announcementsLoading = true;
				const params = {
					page: this.announcementPage,
					size: this.announcementSize,
					ignore_validity: true
				};
				
				const res = await getAnnouncementList(params);
				if (res.code === 200 && res.data) {
					this.noticeList = res.data.list || [];
					this.announcementTotal = res.data.total || 0;
					
					// 更新加载更多状态
					if (this.noticeList.length >= this.announcementTotal) {
						this.announcementsLoadMoreStatus = 'noMore';
					} else {
						this.announcementsLoadMoreStatus = 'more';
					}
				} else {
					uni.showToast({
						title: res.message || '获取公告失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载公告出错:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.announcementsLoading = false;
			}
		},
		
		// 刷新园区公告
		refreshAnnouncements() {
			this.announcementPage = 1;
			this.loadAnnouncements();
		},
		
		// 加载更多园区公告
		async loadMoreAnnouncements() {
			if (this.announcementsLoadMoreStatus === 'noMore' || this.announcementsLoading) {
				return;
			}
			
			this.announcementsLoadMoreStatus = 'loading';
			this.announcementPage++;
			
			try {
				const params = {
					page: this.announcementPage,
					size: this.announcementSize,
					ignore_validity: true
				};
				
				const res = await getAnnouncementList(params);
				if (res.code === 200 && res.data) {
					const newList = res.data.list || [];
					this.noticeList = [...this.noticeList, ...newList];
					
					// 更新加载更多状态
					if (this.noticeList.length >= this.announcementTotal) {
						this.announcementsLoadMoreStatus = 'noMore';
					} else {
						this.announcementsLoadMoreStatus = 'more';
					}
				} else {
					this.announcementsLoadMoreStatus = 'more';
					uni.showToast({
						title: res.message || '获取更多公告失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载更多公告出错:', error);
				this.announcementsLoadMoreStatus = 'more';
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			}
		},
		
		// 查看公告详情
		async viewNoticeDetail(item) {
			try {
				uni.navigateTo({
					url: `/pages/notice/notice-detail?id=${item.id}&type=announcement`
				});
			} catch (error) {
				console.error('查看公告详情出错:', error);
				uni.showToast({
					title: '获取详情失败，请稍后重试',
					icon: 'none'
				});
			}
		},
		
		// 加载园区资讯
		async loadConsultations() {
			try {
				this.consultationsLoading = true;
				const params = {
					page: this.consultationPage,
					size: this.consultationSize,
					ignore_validity: true
				};
				
				const res = await getConsultationList(params);
				if (res.code === 200 && res.data) {
					this.newsList = res.data.list || [];
					this.consultationTotal = res.data.total || 0;
					
					// 更新加载更多状态
					if (this.newsList.length >= this.consultationTotal) {
						this.consultationsLoadMoreStatus = 'noMore';
					} else {
						this.consultationsLoadMoreStatus = 'more';
					}
				} else {
					uni.showToast({
						title: res.message || '获取资讯失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载资讯出错:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.consultationsLoading = false;
			}
		},
		
		// 刷新园区资讯
		refreshConsultations() {
			this.consultationPage = 1;
			this.loadConsultations();
		},
		
		// 加载更多园区资讯
		async loadMoreConsultations() {
			if (this.consultationsLoadMoreStatus === 'noMore' || this.consultationsLoading) {
				return;
			}
			
			this.consultationsLoadMoreStatus = 'loading';
			this.consultationPage++;
			
			try {
				const params = {
					page: this.consultationPage,
					size: this.consultationSize,
					ignore_validity: true
				};
				
				const res = await getConsultationList(params);
				if (res.code === 200 && res.data) {
					const newList = res.data.list || [];
					this.newsList = [...this.newsList, ...newList];
					
					// 更新加载更多状态
					if (this.newsList.length >= this.consultationTotal) {
						this.consultationsLoadMoreStatus = 'noMore';
					} else {
						this.consultationsLoadMoreStatus = 'more';
					}
				} else {
					this.consultationsLoadMoreStatus = 'more';
					uni.showToast({
						title: res.message || '获取更多资讯失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载更多资讯出错:', error);
				this.consultationsLoadMoreStatus = 'more';
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			}
		},
		
		// 查看新闻详情
		viewNewsDetail(item) {
			uni.navigateTo({
				url: `/pages/notice/notice-detail?id=${item.id}&type=consultation`
			});
		},
		
		// 加载用户消息
		async loadUserMessages() {
			try {
				this.userMessagesLoading = true;
				const params = {
					page: this.userMessagePage,
					size: this.userMessageSize,
					ignore_validity: true
				};
				
				const res = await getUserMessages(params);
				if (res.code === 200 && res.data) {
					this.userMessageList = res.data.list || [];
					this.userMessageTotal = res.data.total || 0;
					
					// 更新加载更多状态
					if (this.userMessageList.length >= this.userMessageTotal) {
						this.userMessagesLoadMoreStatus = 'noMore';
					} else {
						this.userMessagesLoadMoreStatus = 'more';
					}
				} else {
					uni.showToast({
						title: res.message || '获取消息失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载消息出错:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.userMessagesLoading = false;
			}
		},
		
		// 刷新用户消息
		refreshUserMessages() {
			this.userMessagePage = 1;
			this.loadUserMessages();
		},
		
		// 加载更多用户消息
		async loadMoreUserMessages() {
			if (this.userMessagesLoadMoreStatus === 'noMore' || this.userMessagesLoading) {
				return;
			}
			
			this.userMessagesLoadMoreStatus = 'loading';
			this.userMessagePage++;
			
			try {
				const params = {
					page: this.userMessagePage,
					size: this.userMessageSize,
					ignore_validity: true
				};
				
				const res = await getUserMessages(params);
				if (res.code === 200 && res.data) {
					const newList = res.data.list || [];
					this.userMessageList = [...this.userMessageList, ...newList];
					
					// 更新加载更多状态
					if (this.userMessageList.length >= this.userMessageTotal) {
						this.userMessagesLoadMoreStatus = 'noMore';
					} else {
						this.userMessagesLoadMoreStatus = 'more';
					}
				} else {
					this.userMessagesLoadMoreStatus = 'more';
					uni.showToast({
						title: res.message || '获取更多消息失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载更多消息出错:', error);
				this.userMessagesLoadMoreStatus = 'more';
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			}
		},
		
		// 查看消息详情
		viewMessageDetail(item) {
			uni.navigateTo({
				url: `/pages/notice/notice-detail?id=${item.id}&type=message`
			});
		},
		
		// 获取新闻类型标签
		getNewsTypeLabel(type) {
			const typeLabels = {
				'园区资讯': '园区',
				'新闻资讯': '新闻',
				'活动推广': '活动'
			};
			return typeLabels[type] || type || '资讯';
		}
	}
}
</script>

<style>
.notice-container {
	background: linear-gradient(135deg, #E6F2FF 0%, #F0F8FF 100%);
	min-height: 100vh;
}

.notice-header {
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	padding: 20rpx 0;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-tabs {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 30rpx;
}

.tab-item {
	padding: 20rpx 40rpx;
	font-size: 32rpx;
	position: relative;
	color: #666;
	transition: all 0.3s ease;
}

.tab-item.active {
	color: #4A89DC;
	font-weight: 600;
	background-color: transparent;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #4A89DC;
	border-radius: 0;
}

.empty-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 0;
}

.empty-icon {
	width: 140rpx;
	height: 140rpx;
	margin-bottom: 30rpx;
	opacity: 0.7;
}

.empty-text {
	font-size: 30rpx;
	color: #8E8E93;
	font-weight: 500;
}

/* 公告列表样式 */
.notice-list, .news-list, .message-list {
	padding: 30rpx;
}

.notice-item, .message-item {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(10px);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	overflow: hidden;
}

.notice-item:active, .message-item:active, .news-item:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}

.notice-item::before, .message-item::before, .news-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 6rpx;
	height: 100%;
	background: linear-gradient(to bottom, #0A84FF, #5AC8FA);
	border-radius: 3rpx;
}

.notice-info, .message-info {
	flex: 1;
	margin-right: 20rpx;
	margin-left: 16rpx;
}

.notice-title, .message-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #1C1C1E;
	margin-bottom: 16rpx;
}

.notice-desc, .message-desc {
	font-size: 28rpx;
	color: #48484A;
	margin-bottom: 20rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.5;
}

.notice-meta, .news-meta, .message-meta {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #8E8E93;
}

.notice-time, .news-time, .message-time {
	font-weight: 500;
}

.notice-from, .news-from {
	color: #8E8E93;
}

.notice-tag, .news-tag, .message-tag {
	background: linear-gradient(135deg, #FF3B30 0%, #FF9500 100%);
	border-radius: 12rpx;
	padding: 6rpx 12rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tag-text {
	color: #FFFFFF;
	font-size: 22rpx;
	font-weight: 600;
}

/* 资讯列表样式 */
.news-item {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	display: flex;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.news-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 16rpx;
}

.news-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1C1C1E;
	margin-bottom: 16rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
}

.news-tag {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
}

.news-meta {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #8E8E93;
	margin-top: 10rpx;
}

.news-meta-right {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.news-type {
	background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
	color: #FFFFFF;
	border-radius: 10rpx;
	padding: 4rpx 12rpx;
	font-size: 22rpx;
	font-weight: 500;
	margin-right: 10rpx;
}

.news-from {
	margin-left: 10rpx;
}

/* 下拉刷新和加载更多样式 */
:deep(.uni-load-more) {
	margin: 20rpx 0;
}
</style> 